<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
</head>
<body>
<%--添加--%>
<form class="layui-form layui-form-pane" id="addForm" lay-filter="addFormFilter" style="display: none;padding: 10px 00px 0px 0px" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <!--隐藏-->
            <input type="hidden" name="guruImage" />

            <label class="layui-form-label">大师名字</label>
            <div class="layui-input-block">
                <input type="text" name="guruName" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">大师昵称</label>
            <div class="layui-input-block">
                <input type="text" name="guruNickName" lay-verify="required" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">头像上传</label>
            <button type="button" class="layui-btn" id="upload">
                <i class="layui-icon">&#xe67c;</i>点击上传
            </button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="guruStatus" value="0" title="正常">
                <input type="radio" name="guruStatus" value="1" title="冻结" checked>
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn" lay-submit="" lay-filter="add-gurn">添加大师</button>
        </div>
    </div>
</form>
<form class="layui-form layui-form-pane" id="xlsForm" lay-filter="xlsFormFilter" style="display: none;padding: 10px 00px 0px 0px" action="">

        <div class="layui-form-item">
            <label class="layui-form-label">XLS上传</label>
            <button type="button" class="layui-btn" id="upload1">
                <i class="layui-icon">&#xe67c;</i>点击上传
            </button>
        </div>


        <div class="layui-inline">
            <button class="layui-btn" lay-submit="" lay-filter="add-xls">添加大师</button>
        </div>
    </div>
</form>



<div class="layui-form-item">

    <!--条件查询----------->
    <div class="layui-form-item">
        <button type="button" id="btnUpload" class="layui-btn layui-btn-warm ">
            批量上传
        </button>
        <button type="button" onclick="f()" id="btnDownload" class="layui-btn layui-btn-warm ">
            批量下载
        </button>
    </div>
</div>
    <div class="layui-form-item">

        <!--条件查询----------->
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="text" required lay-verify="required" name="guruName" id="nameId" class="layui-input">
            </div>
            <button type="button" id="btn1" class="layui-btn  ">
                <i class="layui-icon">&#xe615;</i>
            </button>
        </div>
    </div>
<div class="layui-inline">
    <div class="layui-input-block">
        <button id="addGurn" class="layui-btn"  lay-filter="addGurn">添加大师</button>
    </div>
</div>
    <div class="layui-row">
        <table class="layui-hide" id="myTable" lay-filter="myTable"></table>
    </div>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            修改状态</a>
    </script>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script type="text/javascript">
        function f() {
            console.log("nnnn");
            window.location.href="${pageContext.request.contextPath}/gurn/download";
        }
    </script>

<script>

        layui.use(['form', 'table','upload'], function () {
            var $ = layui.$;
            var form = layui.form;
            var table = layui.table;
            var upload = layui.upload;
            table.render({
                elem:"#myTable"//指定到一个html元素，写的是选择器
                ,url:"${pageContext.request.contextPath}/gurn/selectAll"//发送请求的后台地址
                ,toolbar:"#toolbarDemo"
                ,cols:[[
                    {field:"guruId",title:"编号",width:60}
                    ,{field:"guruName",title:"名字",width:100}
                    ,{field:"guruImage",title:"头像",width:100,templet:function (d) {
                            return '<div><img height=\'50px\',width=\'50px\' src=${pageContext.request.contextPath}/'+d.guruImage+' ></div>'
                        }}
                    ,{field:"guruNickName",title:"大师昵称",width:150}
                    ,{field:"guruStatus",title:"大师状态",width:100,templet:function (d) {
                            if (d.guruStatus==1){
                                return "冻结";
                            }else if (d.guruStatus==0) {
                                return "正常";
                            }
                        }}
                    ,{title:"操作", toolbar: '#barDemo', width: 180}
                ]]
                , page: true //开启分页
                ,limit:3
                ,limits:[3,6,9]
            });
            // --------------条件查询 开始-------------
            $("#btn").click(function () {
                table.reload('myTable', {
                    where: {   //设定异步数据接口的额外参数
                        guruName:$("#nameId").val(),
                    },
                    page:{
                        curr:1
                    }
                })
            })
            // --------------条件查询 结束-------------

            // 添加 上传文件  开始-------------
            upload.render({
                elem:"#upload",
                url:'${pageContext.request.contextPath}/gurn/upload',
                done:function (res){
                    form.val('addFormFilter',{
                        guruImage:res.newName
                    })
                    layer.msg("图片上传成功");
                }
            })
            //下载

            // 添加 上传文件  结束-------------
            $("#btnUpload").click(function () {
                layer.open({
                    type:1,
                    title:'批量上传',
                    area:'500px',
                    content:$("#xlsForm"),
                })
            })
            upload.render({
                elem:"#upload1"
                ,accept: 'file' //普通文件
                ,exts: 'xls' //允许上传的文件后缀
               ,url:'${pageContext.request.contextPath}/gurn/uploadXml',
                done:function (res){

                    layer.msg("上传成功");
                    $("#xlsForm")[0].reset();
                    layer.closeAll();
                }
            })

            //添加  开始 -----------------
            $("#addGurn").click(function () {
                layer.open({
                    type:1,
                    title:'添加',
                    area:'800px',
                    content:$("#addForm"),
                    maxmin:true
                })
            })
            form.on('submit(add-gurn)', function (data) {
                $.ajax({
                    url:'${pageContext.request.contextPath}/gurn/addGurn',
                    data:$("#addForm").serialize(),
                    success:function (result) {
                        if(result.flag){
                            table.reload('myTable');
                            $("#addForm")[0].reset();
                            layer.closeAll();
                            layer.msg("添加成功");
                        }else if(result.flag==false){
                            layer.msg("添加异常")
                        }
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //  添加 结束 ---------------------------

            //监听行工具事件   单个删除   开始---------
            table.on('tool(myTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    $.ajax({
                        url:'${pageContext.request.contextPath}/gurn/updateGurn',
                        data:"guruStatus="+obj.data.guruStatus+"&guruId="+obj.data.guruId,
                        success:function (result) {
                            if(result.flag){
                                table.reload('myTable');
                                layer.msg("修改成功");
                            }else if(result.flag==false){
                                layer.msg("修改异常")
                            }
                        }
                    })
                }
            });


        })
    </script>
</body>
</html>
























